import React from 'react';
import Taro, { requirePlugin } from '@tarojs/taro';

import { connect } from 'react-redux';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import { debounce } from 'lodash';
import { ScrollView, View, Image, Text } from '@tarojs/components';
import Selecteds from './components/Selecteds';
import ActionSheet from './components/ActionSheet';
import Servers from './components/Servers';
import Pay from './components/Pay';
import Points from './components/Points';
import './index.less';
import btn from './components/img/btn.png';
import up from './components/img/up.png';

const chooseLocation = requirePlugin('chooseLocation');

actions().actions.loadReducer();

// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class AddPickupCourierD extends React.Component<Partial<T.IProps>, any> {
  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  componentDidMount() {
    // 或取路由值  // eg: { id: 2, type: 'test' }
    let { id, deliveryAddressId } = Taro.getCurrentInstance()?.router?.params
    this.props.actions.init(id, deliveryAddressId);
  }

  componentDidShow() {

    let addressSelect = Taro.getStorageSync('Select delivery address')
    if (addressSelect) {
      this.props.actions.action.commonChange('main.addressSelect', addressSelect)
    }

    // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
    // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    const location = chooseLocation.getLocation();
    if (location) {
      console.log(location, '<<<<location')
      this.props.actions.action.handleMapData(location)
      // this.props.actions.action.commonChange('main.formData.address', location.province + location.city + location.district + location.name)
    }

  }

  componentWillUnmount() {
    chooseLocation.setLocation(null);
    this.props.actions.clean();
  }

  render() {
    if (!this.props.main) return null;
    let {
      main: { isLoading, deliveryFee },
    } = this.props;
    console.log(isLoading);

    return (
      <View className="pageAddPickupCourierD">
        <ScrollView scrollY style={{ overflow: 'hidden' }} >
          <Selecteds />
          <Servers />
          {/* <Pay /> */}
          <Points />
        </ScrollView>

        <View className='props-bottom'>
          <View className='details'>
            <View className='row'>
              <Text className='p1'>配送费</Text>
              <Text className='p2'>{deliveryFee || '--'}积分</Text>
            </View>
            <View className='row ai-c' style={{ justifyContent: 'flex-end' }} onClick={() => this.props.actions.action.commonChange('main.showExpenseDetails', true)}  >
              <Text className='p3'>查看明细</Text>
              <Image className="p4" src={up} mode="widthFix" />
            </View>
          </View>

          <Image
            className="btn-icon"
            src={btn}
            mode="widthFix"
            onClick={debounce(() => this.props.actions.action.releasePoints(), 800)}
          />
        </View>

        <ActionSheet />
      </View>
    );
  }
}
